<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link href="../../resources/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script src="../../resources/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../resources/bootstrap-3.3.7/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">
        body {
            padding-top: 100px;
        }
    </style>
</head>

<body>
<!-- 首页导航Bar -->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="">Project name</a>
        </div>
    </div>
</nav>
<!-- 主体 -->
<div class="container-fluid">
    <div class="container">
        <nav class="navbar navbar-default">
            <div class="navbar-form navbar-left">
                <div class="form-group">
                    <a class="btn btn-default" href="/main" role="button">返回首页</a>
                </div>
            </div>
        </nav>
        <div class="jumbotron form-horizontal">
            <div class="form-group">
                <label for="dateParam" class="col-sm-2 control-label">日期参数：</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" placeholder="日期参数" id="dateParam">
                </div>
            </div>
            <div class="form-group">
                <label for="numParam" class="col-sm-2 control-label">数字参数：</label>
                <div class="col-sm-10">
                    <input class="form-control" type="text" placeholder="数字参数" id="numParam">
                </div>
            </div>
            <div class="form-group ">
                <div class="col-sm-offset-2 col-sm-10">
                    <button class="btn btn-success" id="testBinder">测试Binder</button>
                    <button class="btn btn-success" id="testConverter">测试Converter</button>
                    <button class="btn btn-success" id="testInitBinder">测试InitBinder</button>
                    <button class="btn btn-success" id="testFormatting">测试Formatting</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $('#testBinder').click(function (event) {
        var user = {};
        var address = {};
        user.userId = 11;
        user.userName = 'Tome';
        user.password = '123456';
        user.salary = $('#numParam').val();
        user.birthday = $('#dateParam').val();
        address.province = '上海市';
        address.city = '松江区';
        user.address = address;
        user = recursion(user);
        var param = JSON.stringify(user);
        console.log(user);
        console.log(param);
        $.ajax({
            url: '/demo3/testBinder',
            type: 'POST',
            data: user,
            success: function (data) {
                alert(data);
            }
        }).done(function () {
            console.log("success");
        }).fail(function () {
            console.log("error");
        }).always(function () {
            console.log("complete");
        });
    });

    function recursion(obj, prefix) {
        var data = {};
        for (var key in obj) {
            if (typeof obj[key] == 'object') {
                Object.assign(data, recursion(obj[key], key));
            } else {
                if (prefix) {
                    data[prefix + "." + key] = obj[key];
                } else {
                    data[key] = obj[key];
                }
            }
        }
        return data;
    }

    $('#testConverter').click(function (event) {
        var user = {};
        var address = {};
        user.userId = 1;
        user.userName = 'Tome';
        user.password = '123456';
        user.salary = $('#numParam').val();
        user.birthday = $('#dateParam').val();
        address.province = 'shanghaishi';
        address.city = '松江区';
        user.address = address;
        user = recursion(user);

        $.ajax({
            url: '/demo3/testConverter',
            type: 'GET',
            data: user,
            success: function (data) {
                alert(data);
            }
        })
    });


    $('#testInitBinder').click(function (event) {
        var user = {};
        var address = {};
        user.userId = 1;
        user.userName = 'Tome';
        user.password = '123456';
        user.salary = $('#numParam').val();
        user.birthday = $('#dateParam').val();
        address.province = 'shanghaishi';
        address.city = '松江区';
        user.address = address;
        user = recursion(user);
        $.ajax({
            url: '/demo3/testInitBinder',
            type: 'GET',
            data: user,
            success: function (data) {
                alert(data);
            }
        })
    });


    $('#testFormatting').click(function (event) {

        var employee = {};
        employee.employeeId = '1';
        employee.employeeName = 'New Emp';
        employee.hireDate = $('#dateParam').val();
        employee.salary = $('#numParam').val();
        $.ajax({
            url: '/demo3/testFormatting',
            type: 'GET',
            data: employee,
            success: function (data) {
                alert(data);
            }
        })
    });
</script>
<script type="text/javascript" color="255,0,0" opacity='0.7' count='200'
        src="https://cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>

</html>